<template>
  <!-- 引入TeacherSearch组件 -->
  <TeacherSearch @getData="handleGetResponseData"></TeacherSearch>
  <h1>教师人品排行榜：</h1>
  <div class="teacher-ranking">
    <div class="teacher-row" v-for="(teacher, index) in sortedTeachers" :key="teacher.teacherId">
        <div class="info-content">
          <h2>{{index+1}}|&nbsp;{{ teacher.teacherName }}&nbsp;{{ teacher.department }}&nbsp;好评率：{{ (teacher.positiveRate * 100).toFixed(2) }}%</h2>
        </div>
    </div>
  </div>
</template>

<script>
import {computed} from "vue";
import TeacherSearch from "@/components/TeacherSearch.vue";
export default {
  name: "TeacherSort",
  components: {TeacherSearch},
  data() {
    return {
      responseDataFromChild: '' // 用来存储从TeacherSearch组件接收到的数据
    };
  },
  methods: {
    handleGetResponseData(data) {
      this.responseDataFromChild = data;
    }
  },
  computed: {
    // 提取并排序教师列表
    sortedTeachers() {
      return this.responseDataFromChild?.data || [];
    }
  }
};

</script>

<style scoped>
.teacher-ranking {
  /*display: grid;*/
  /*grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));*/
  /*gap: 1rem;*/
}

.teacher-row {
  display: flex;
  flex-direction: column;
}

.rank {
  align-self: flex-start;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.info-content p:not(:last-child) {
  margin-right: 0.5rem;
}
</style>